<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adBox {
            width: 300px;
            height: 400px;
            background-color: #6ff;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .title {
            position: relative;
            font-size: 14px;
        }

        .title .tips {
            text-indent: 5px;
        }

        .title .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 4px;
            background-color: #f00;
        }

        .body img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <div class="adBox">
        <div class="title">
            <div class="tips">距离广告关闭还有0秒</div>
            <div class="close">x</div>
        </div>
        <div class="body">
            <a href="">
                <img src="https://img20.360buyimg.com/babel/s580x740_jfs/t1/169223/11/9002/236742/603f38feEa4a8d83e/4ace79eafcac855c.jpg!cc_290x370.webp"
                    alt="">
            </a>
        </div>
    </div> -->
</body>
<script>
    // 小广告
    // (1)  延迟5秒 显示小广告
    // (2)  小广告显示之后 倒计时10秒   => 关闭
    // (3)  重复(1) (2) 操作
    // (4)  点击关闭按钮  => 暂停小广告(清除延时器)

    // 总结: JS的动态生成
    // (1)  借助模板字符串      => 批量生成
    // 优点: 可以根据既定的模板 快速生成字符串
    // 缺点: 模板字符串生成字符串的过程中 无法对应字符串中的元素即时绑定事件 => 等待生成完毕(放到页面中) 再获取元素和绑定事件


    // (2)  DOM节点创建动态生成   => 写插件
    // 优点: 节点创建过程比较灵活,可以在创建时给元素绑定事件
    // 缺点: 对于复杂html结构 麻烦,代码冗余


    /* <div class="adBox">
        <div class="title">
            <div class="tips">距离广告关闭还有0秒</div>
            <div class="close">x</div>
        </div>
        <div class="body">
            <a href="">
                <img src="https://img20.360buyimg.com/babel/s580x740_jfs/t1/169223/11/9002/236742/603f38feEa4a8d83e/4ace79eafcac855c.jpg!cc_290x370.webp"
                    alt="">
            </a>
        </div>
    </div> */

    loop();

    function loop(delay){  // {delay,a_href,img_src}
        delay = delay == undefined ? 5000 : delay;
        var delayTimer = setTimeout(function(){
            var adBox = document.createElement("div");
            adBox.className = "adBox";
            document.body.appendChild(adBox);

            var title = document.createElement("div");
            title.className = "title";
            var tips = document.createElement("div");
            tips.className = "tips";
            tips.textContent = "距离广告关闭还有10秒"
            title.appendChild(tips);
            var close = document.createElement("div");
            close.className = "close";
            close.textContent = "x";
            close.onclick = function(){
                clearTimeout(delayTimer);
                clearInterval(timer);
                adBox.remove();
                loop();
            }
            title.appendChild(close);
            adBox.appendChild(title);

            var body = document.createElement("div");
            body.className = "body";
            var a = document.createElement("a");
            a.setAttribute("href","https://www.jd.com");
            var img = document.createElement("img");
            img.setAttribute("src","https://img20.360buyimg.com/babel/s580x740_jfs/t1/169223/11/9002/236742/603f38feEa4a8d83e/4ace79eafcac855c.jpg!cc_290x370.webp");
            a.appendChild(img);
            body.appendChild(a);
            adBox.appendChild(body);

            var num = 10;
            var timer = setInterval(function () {
                num--;
                tips.innerText = `距离广告关闭还有${num}秒`;

                if (num == 0) {
                    clearInterval(timer);
                    adBox.remove();
                    loop(delay);
                }

            }, 1000);

        },delay)
    }



</script>

</html>